<!-- 图文广告 -->
<template>
  <div
    :style="{
      padding: '0 ' + config.ConfigData.padding + 'px',
      'background-color': config.ConfigData.bgcolor,
      margin: '0 ' + config.ConfigData.margin + 'px',
      'border-radius': config.ConfigData.bgradius + 'px'
    }"
  >
    <div
      v-if="config.ConfigData.type === 1"
      class="bannerview"
      :style="{
        position: 'relative',
        height: config.ConfigData.fixHight + 'px'
      }"
    >
      <div
        class="bannerview"
        :style="{ height: config.ConfigData.fixHight + 'px' }"
      >
        <van-swipe :autoplay="3000">
          <van-swipe-item
            v-for="(item, index) in config.ConfigData.items"
            :key="index"
          >
            <div
              :style="{
                'background-color': config.ConfigData.itembgcolor,
                'border-radius': config.ConfigData.itemradius + 'px'
              }"
            >
              <img
                lazy-load
                :style="{
                  height: config.ConfigData.fixHight + 'px',
                  'border-radius': config.ConfigData.radius + 'px'
                }"
                :src="item.imgurl | getgalleryImg('w750')"
                class="slide-img"
              />
            </div>
          </van-swipe-item>
        </van-swipe>
      </div>
      <!-- <div class="pointview" v-if="{{config.Points.length!==1}}">
        <repeat for="{{config.Points}}" key="index" index="index" item="item">
          <div class="bannernum {{item===1?'senum':''}}">
          </div>
        </repeat>
      </div> -->
    </div>
    <div v-if="config.ConfigData.type === 2">
      <div
        v-if="
          config.ConfigData.items[0].title &&
            config.ConfigData.items[0].desc &&
            config.ConfigData.items[0].price
        "
        class="bannerview type2bannerview typ2"
      >
        <div class="bannerview type2bannerview typ2">
          <van-swipe :autoplay="3000">
            <van-swipe-item
              v-for="(item, index) in config.ConfigData.items"
              :key="index"
            >
              <div
                class="type2item"
                :style="{
                  'background-color': config.ConfigData.itembgcolor,
                  'border-radius': config.ConfigData.itemradius + 'px'
                }"
              >
                <img
                  lazy-load
                  mode="aspectFill"
                  :src="item.imgurl | getgalleryImg('w750')"
                  class="slide-img type2 type2bannerview"
                  :style="{ 'border-radius': config.ConfigData.radius + 'px' }"
                />
              </div>
            </van-swipe-item>
          </van-swipe>
        </div>
        <!-- 注释掉原版 -->
        <!-- <swiper class="bannerview type2bannerview typ2" bindchange="change" interval="5000" duration="500" previous-margin="0px" next-margin="70px" >
          <repeat for="{{config.ConfigData.items}}" key="index" index="index" item="item">
            <swiper-item >
            <div  class="type2item" style="background-color:{{config.ConfigData.itembgcolor}};border-radius:{{config.ConfigData.itemradius}}px;">
              <img lazy-load="{{true}}" mode="aspectFill" src="{{util.getCompressProductImg(item.imgurl,'w750')}}" @tap="ngt({{item}},{{config.ConfigData.items}})" class="slide-img type2 type2bannerview"  style="border-radius:{{config.ConfigData.radius}}px;"/>
            </div>
            </swiper-item>
          </repeat>
        </swiper> -->
      </div>
      <div v-else class="bannerview type2bannerview type2text">
        <van-swipe :autoplay="3000">
          <van-swipe-item
            v-for="(item, index) in config.ConfigData.items"
            :key="index"
          >
            <div
              class="type2item"
              :style="{
                'background-color': config.ConfigData.itembgcolor,
                'border-radius': config.ConfigData.itemradius + 'px'
              }"
            >
              <img
                lazy-load
                mode="aspectFill"
                :src="item.imgurl | getgalleryImg('w750')"
                class="slide-img type2 "
                :style="{ 'border-radius': config.ConfigData.radius + 'px' }"
              />
              <div class="type2view">
                <text
                  class="title"
                  :style="{ color: config.ConfigData.titlecolor }"
                  >{{ item.title }}</text
                >
                <!-- <text class="desc">{{item.desc}}</text> -->
                <text
                  class="price"
                  v-if="!item.price"
                  :style="{ color: config.ConfigData.pricecolor }"
                  >{{ getProductPrice(item.price) }}</text
                >
              </div>
            </div>
          </van-swipe-item>
        </van-swipe>

        <!-- <swiper  bindchange="change" interval="5000" duration="500" previous-margin="0px" next-margin="70px">
          <repeat for="{{config.ConfigData.items}}" key="index" index="index" item="item">
            <swiper-item >
            <div class="type2item" style="background-color:{{config.ConfigData.itembgcolor}};border-radius:{{config.ConfigData.itemradius}}px;">
              <img lazy-load="{{true}}" mode="aspectFill" src="{{util.getCompressProductImg(item.imgurl,'w750')}}" @tap="ngt({{item}},{{config.ConfigData.items}})" class="slide-img type2 "  style="border-radius:{{config.ConfigData.radius}}px;" />
              <div class="type2view">
                <text class="title" style="color:{{config.ConfigData.titlecolor}}">{{item.title}}</text>
                <text class="price" v-if="{{!util.isReallyNull(item.price)}}" style="color:{{config.ConfigData.pricecolor}}">{{util.getProductPrice(item.price)}}</text>
              </div>
            </div>
            </swiper-item>
          </repeat>
        </swiper> -->
      </div>
    </div>
    <div v-if="config.ConfigData.type === 3">
      <div
        v-if="
          config.ConfigData.items[0].title &&
            config.ConfigData.items[0].desc &&
            config.ConfigData.items[0].price
        "
        class="bannerview typ3"
        style="position:relative"
      >
        <div class="typeview3">
          <!-- <scroll-div scroll-x style="width: 100%"> -->
          <div class="typeview3_1">
            <div
              v-for="(item, index) in config.ConfigData.items"
              :key="index"
              class="typeview3_1_1"
              :style="{
                'background-color': config.ConfigData.itembgcolor,
                'border-radius': config.ConfigData.itemradius + 'px'
              }"
            >
              <img
                lazy-load
                mode="aspectFill"
                class="imgtype3"
                :src="item.imgurl | getgalleryImg('w450')"
                :style="{ 'border-radius': config.ConfigData.radius + 'px' }"
              />
            </div>
          </div>
          <!-- </scroll-div> -->
        </div>
      </div>
      <div v-else class="bannerview " style="position:relative;">
        <div class="typeview3">
          <!-- <scroll-div scroll-x style="width: 100%"> -->
          <div class="typeview3_1">
            <div
              v-for="(item, index) in config.ConfigData.items"
              :key="index"
              class="typeview3_1_1"
              :style="{
                'background-color': config.ConfigData.itembgcolor,
                'border-radius': config.ConfigData.itemradius + 'px'
              }"
            >
              <img
                lazy-load
                mode="aspectFill"
                class="imgtype3"
                :src="item.imgurl | getgalleryImg('w450')"
                :style="{ 'border-radius': config.ConfigData.radius + 'px' }"
              />
              <div class="contenttext">
                <text
                  class="title"
                  :style="{ color: config.ConfigData.titlecolor }"
                  >{{ item.title }}</text
                >
                <!-- <text class="desc">{{item.desc}}</text> -->
                <text
                  class="price"
                  :style="{ color: config.ConfigData.pricecolor }"
                  >{{ getProductPrice(item.price) }}</text
                >
              </div>
            </div>
          </div>
          <!-- </scroll-div> -->
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { isReallyNull } from "@/utils/utils";

export default {
  name: "GratextAdsCopt",
  props: {
    config: Object
  },
  data() {
    return {};
  },
  methods: {
    change(e) {
      // let _this = this
      // var detail = e.detail
      // if (_this.config.Points) {
      //   _this.config.Points = _this.config.Points.map((e) => e = 0)
      //   _this.config.Points[detail.current] = 1
      // }
    },
    ngt(item, items) {
      if (isReallyNull(item.linktype) || isReallyNull(item.bizsysnos)) {
        let urls = [];
        items.map(e => urls.push(e.imgurl));
        // wepy.previewImage({
        //   current: item.imgurl,
        //   urls: urls // 需要预览的图片链接列表,
        // });
        return;
      }
      this.$emit("comsngt", item);
    }
    // loadimg(img) {
    //   let hight = img.detail.height
    //   let _this = this
    //   if (!isReallyNull(hight)) {
    //     if (_this.fixhight > 0 && hight > _this.fixhight) {
    //       _this.fixhight = hight
    //     } else {
    //       _this.fixhight = hight
    //     }
    //     _this.$apply()
    //   }
    // }
  },
  mounted() {}
};
</script>

<style lang="scss" scoped>
.type2item {
  margin: 0 5px;
  overflow: hidden;
}
.type2text {
  height: 262px !important;
}
.bannerview {
  //height: 410px;
  box-sizing: border-box;
  width: 100%;
  text-align: center;
  text {
    text-align: left;
    display: block;
    font-size: 15px;
  }
  .title {
    color: #222;
    font-weight: 600;
  }
  .desc {
    color: #999;
    font-size: 12px;
    margin-top: 5px;
  }
  .price {
    color: rgba(249, 58, 38, 1);
    font-weight: 600;
    margin-top: 4px;
  }
}
.typ2 {
  height: 241px !important;
}
.type2bannerview {
  height: 252px;
  .type2view {
    margin: 0 5px;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    text {
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .title {
      font-size: 12px;
      font-family: "PingFang-SC-Medium";
      font-weight: 500;
      color: rgba(34, 34, 34, 1);
      width: 210px;
    }
    .price {
      font-size: 14px;
      font-family: "PingFang-SC-Regular";
      font-weight: 400;
      color: rgba(249, 58, 38, 1);
      position: absolute;
      top: 0px;
      right: 0px;
      margin-top: 0px;
    }
  }
}
.slide-img {
  // width: 686px;
  height: 205px; //border-radius: 20px;
  //margin: 0 10px;
}
.type2 {
  // margin: 0 10px;
  //width: 670px;
  height: 241px;
  box-shadow: 0px 7.5px 15px 0px rgba(143, 143, 143, 0.2);
}
.typ3 {
  //height: 210px;
}
.typeview3 {
  padding: 0 5px; //width: 100%;
  white-space: nowrap;
  .typeview3_1 {
    overflow: hidden;
    flex-direction: row;
    display: inline-flex;
    .typeview3_1_1 {
      display: inline-block;
      margin-right: 5px;
      overflow: hidden;
      text {
        font-size: 14px;
        font-family: "PingFang-SC-Medium";
        font-weight: 500;
        color: rgba(34, 34, 34, 1);
        text-align: left;
        display: block;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .contenttext {
        width: 150px;
        overflow: hidden;
      }
      .title {
        margin-top: 7.5px;
      }
      .desc {
        color: #999;
        font-size: 11px;
        margin-top: 1px;
      }
      .price {
        color: rgba(249, 58, 38, 1);
        margin-top: 4px;
      }
    }
  }
  .imgtype3 {
    width: 272px;
    height: 133px;
  }
}
.pointview {
  position: absolute;
  bottom: 21px;
  width: 100%;
  display: flex;
  justify-content: center;
}
.bannernum {
  width: 12px;
  height: 5px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 2.5px;
  margin: 0 3.5px;
  transition: all 0.5s;
}
.senum {
  width: 19px;
  background: rgba(255, 255, 255, 1);
  transition: all 0.5s;
}
</style>
